<template>
  <div class="dashboard-editor-container">
    <!-- 第一列 -->
    <a-row :gutter="24">
      <!-- 快捷菜单 -->
      <a-col :sm="12" :md="7" :lg="7">
        <div class="c-card">
          <div class="text-box">
            <h3 class="text-h3">快捷菜单</h3>
          </div>
          <div class="body-box">
            <div class="quick-button-box">
              <div
                class="quick-button"
                onclick="window.location.href = '#/chapter/check'"
              >
                <svg-icon
                  class="quick-icon"
                  icon-class="home_shoucang"
                ></svg-icon>
                <p class="quick-p">用章审核</p>
              </div>
            </div>
            <div class="quick-button-box">
              <div
                class="quick-button"
                @click="a"
              >
                <svg-icon
                  class="quick-icon"
                  icon-class="home_yunwei"
                ></svg-icon>
                <p class="quick-p">合同审批</p>
              </div>
            </div>
            <div class="quick-button-box">
              <div
                class="quick-button"
                onclick="window.location.href = '#/purchase/plan/list'"
              >
                <svg-icon
                  class="quick-icon"
                  icon-class="home_gouwuche"
                ></svg-icon>
                <p class="quick-p">采购计划</p>
              </div>
            </div>
            <div class="quick-button-box">
              <div
                class="quick-button"
                onclick="window.location.href = '#/report/sendReceiveDeposit/sendReceiveDeposit'"
              >
                <svg-icon
                  class="quick-icon"
                  icon-class="home_wenjian"
                ></svg-icon>
                <p class="quick-p">收发存报表</p>
              </div>
            </div>
            <div class="quick-button-box">
              <div
                class="quick-button"
                onclick="window.location.href = '#/inquiry/inquiryResult/list'"
              >
                <svg-icon class="quick-icon" icon-class="home_yue"></svg-icon>
                <p class="quick-p">报价管理</p>
              </div>
            </div>
            <div class="quick-button-box">
              <div
                class="quick-button"
                onclick="window.location.href = '#/dashboard'"
              >
                <svg-icon
                  class="quick-icon"
                  icon-class="home_gengduo"
                ></svg-icon>
                <p class="quick-p">更多</p>
              </div>
            </div>
          </div>
        </div>
      </a-col>
      <a-col :sm="12" :md="6" :lg="6">
        <!-- 待办事项 -->
        <div class="c-card">
          <div class="text-box">
            <h3 class="text-h3">待办事项</h3>
          </div>
          <div class="body-box">
            <div class="to-do-button-box">
              <div class="to-do-button" @click="showDialog">
                <p class="p-1">审核待办</p>
                <p class="p-2">{{ auditNumber }}</p>
              </div>
            </div>
            <div class="to-do-button-box">
              <div class="to-do-button">
                <p class="p-1">待办事项</p>
                <p class="p-2">99</p>
              </div>
            </div>
            <div class="to-do-button-box">
              <div class="to-do-button">
                <p class="p-1">待办事项</p>
                <p class="p-2">99</p>
              </div>
            </div>
            <div class="to-do-button-box">
              <div class="to-do-button">
                <p class="p-1">待办事项</p>
                <p class="p-2">99</p>
              </div>
            </div>
          </div>
        </div>
      </a-col>
      <!-- 第二列 -->
      <a-col :sm="12" :md="11" :lg="11">
        <!--发文-->
        <div class="c-card">
          <!-- 标题部分 -->
          <div class="text-box" style="height: 12%">
            <h2 class="text-h3" style="float: left">发文</h2>
            <a
              style="
                float: right;
                padding: 3px 0;
                color: #1890ff;
                margin-right: 10px;
                margin-top: 8px;
              "
              type="text"
              onclick="window.location.href = '#/document/query'"
              >查看更多</a
            >
            <!-- 分隔线 -->
          </div>
          <div
            style="
              float: left;
              width: 100%;
              height: 2%;
              border-top: 1px solid #cccccc;
            "
          ></div>
          <!-- 正文部分 -->

          <div
            class="body-box"
            style="height: 89%; padding-left: 5px; padding-right: 5px"
            ref="doc"
          >
            <el-table
              :data="documents"
              stripe
              style="width: 100%"
              :header-cell-style="{
                background: '#eef1f6',
                color: 'black',
                fontSize: '15px',
              }"
            >
              <el-table-column prop="name" label="标题" align="center">
                <template slot-scope="scope">
                  <a style="color: black" @click="viewFile(scope.row)">{{
                    scope.row.name
                  }}</a>
                </template>
              </el-table-column>
              <el-table-column
                prop="department"
                label="发文部门"
                align="center"
                width="180"
              ></el-table-column>
              <el-table-column
                prop="updateTime"
                label="发文日期"
                align="center"
                width="180"
              >
                <template slot-scope="scope">
                  {{ dateTimeFormat(scope.row.updateTime).split(" ")[0] }}
                </template>
              </el-table-column>
            </el-table>
          </div>
          <!-- <div class="body-box" style="height: 86%;">
              <a-row :gutter="24">
                <a-col :sm="24" :md="12" :lg="12" class="item-box" v-for="(document,index) in documents" :key="index">
                  <div class="document-box" @click="viewFile(document)">
                    <div v-if="index>1" style="float: left; width: 100%; height: 1px; border-top: 1px solid #cccccc"></div>
                    <div style="padding:6px">
                      <div style="width: 50%; float: left"> -->
          <!-- 标题 -->
          <!-- <div class="document-text">
                          <span :title=document.name>{{document.name}}</span>
                          <el-badge :is-dot="document.readStatus == 0? true: false" class="item" />
                        </div> -->
          <!-- 左内容 放标签 -->
          <!-- <div class="document-content-left">
                          <div class="tag-box">
                            <el-tag size="mini" style="float: right"><div style="text-overflow:ellipsis;width:30px;overflow:hidden;">{{document.type.length>6 ? document.type.substring(0,5)+'..':document.type}}</div></el-tag>
                          </div>
                          <div class="tag-box">
                            <div style="float: left; height:100%; width: 100%; margin-top:20px">
                              <el-tag v-if="document.level=='一般'" size="mini" type="info" style="float: right">{{document.level.length>4 ? document.level.substring(0,2)+'..':document.level}}</el-tag>
                              <el-tag v-if="document.level=='重要'" size="mini" type="warning" style="float: right">{{document.level.length>4 ? document.level.substring(0,2)+'..':document.level}}</el-tag>
                              <el-tag v-if="document.level=='紧急'" size="mini" type="danger" style="float: right">{{document.level.length>4 ? document.level.substring(0,2)+'..':document.level}}</el-tag>
                            </div>
                          </div>
                        </div>
                      </div> -->
          <!-- 右内容  -->
          <!-- <div style="width: 50%;float:left">
                        <div style="padding: 4px;font-size: 18px;text-overflow:ellipsis;overflow:hidden;white-space: nowrap; ">
                          {{document.department}}
                        </div>
                        <div style="margin-top: 40px;text-overflow:ellipsis;overflow:hidden;white-space: nowrap;">
                          {{dateTimeFormat(document.updateTime).substring(0,10)}}
                        </div>
                      </div>
                    </div>
                  </div>
                </a-col>
              </a-row>
            </div> -->
        </div>
      </a-col>

      <a-col :sm="12" :md="24" :lg="24">
        <!-- 图表 -->
        <div class="column-box" style="width: 100%">
          <div
            style="
              background-color: #ffffff;
              margin: 10px;
              border-radius: 1%;
              padding: 20px;
              height: 420px;
            "
          >
            <Bar id="id" style="width: 100%; height: 100%" />
          </div>
        </div>
      </a-col>
    </a-row>

    <!-- 待办事项总览 -->
    <el-dialog
      title="审核待办"
      :visible.sync="dialogTableVisible"
      width="500px"
    >
      <a class="a-label" href="#/backlog/list">查看详情</a>
      <el-table :data="gridData">
        <el-table-column
          property="auditPrivilege"
          label="审核待办"
          align="center"
        ></el-table-column>
        <el-table-column
          property="number"
          label="待办个数"
          align="center"
        ></el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import Bar from "@/charts/Bar";
import Pie1 from "@/charts/Pie1";
import Pie2 from "@/charts/Pie2";

import infiniteScroll from "vue-infinite-scroll";
import {
  getAction,
  postActionByJson,
  postActionByQueryString,
} from "@/api/manage";
import "vue-virtual-scroller/dist/vue-virtual-scroller.css";
import { dateTimeFormat } from "@/utils/format";
import {getUser} from '@/utils/auth'

import "@/styles/auto-style.css";

export default {
  name: "DashboardAdmin",
  directives: { infiniteScroll },
  components: {
    Pie2,
    Pie1,
    Bar,
  },
  data() {
    return {
      docHeight: "",
      dialogTableVisible: false,
      gridData: [],
      auditInfo: {},
      auditNumber: 0,
      url: {
        selectDocumentSendOut: "/document/selectDocumentSendOut",
        updateDocumentRead: "/document/updateDocumentRead",
        selectUserAuditPrivilege: "/backLogAudit/selectUserAuditPrivilege",
        selectFirstAuditInfo: "/backLogAudit/selectFirstAuditInfo",
        selectSecondAuditInfo: "/backLogAudit/selectSecondAuditInfo",
        selectThirdAuditInfo: "/backLogAudit/selectThirdAuditInfo",
        selectCompareAuditInfo: "/backLogAudit/selectCompareAuditInfo",
        selectFinallyAuditInfo: "/backLogAudit/selectFinallyAuditInfo",
        selectTechnicalAuditInfo: "/backLogAudit/selectTechnicalAuditInfo",
        selectBusinessAuditInfo: "/backLogAudit/selectBusinessAuditInfo",
        selectChapterAuditInfo: "/backLogAudit/selectChapterAuditInfo",
      },
      documents: [],
      auditPrivilegeList: [],
      loading: true,
    };
  },
  beforeMount() {},
  mounted() {
    this.docHeight = this.$refs.doc.clientHeight;
  },
  async created() {
    this.gridData = [];
    this.auditNumber = 0;
    this.toSearch();
    await this.selectUserAuditPrivilege();
    for (const item of this.auditPrivilegeList) {
      switch (item) {
        case "一级审核":
          await this.selectAuditInfo(item, this.url.selectFirstAuditInfo);
          break;
        case "二级审核":
          await this.selectAuditInfo(item, this.url.selectSecondAuditInfo);
          break;
        case "三级审核":
          await this.selectAuditInfo(item, this.url.selectThirdAuditInfo);
          break;
        case "比价审核":
          await this.selectAuditInfo(item, this.url.selectCompareAuditInfo);
          break;
        case "最终审核":
          await this.selectAuditInfo(item, this.url.selectFinallyAuditInfo);
          break;
        case "技术审核":
          await this.selectAuditInfo(item, this.url.selectTechnicalAuditInfo);
          break;
        case "商务审核":
          await this.selectAuditInfo(item, this.url.selectBusinessAuditInfo);
          break;
        case "用章审核":
          await this.selectAuditInfo(item, this.url.selectChapterAuditInfo);
          break;
      }
    }
  },
  mounted() {},
  methods: {
    getUser,
    a() {
      let role = getUser()
      if(role === '677972806'){
        this.$router.push({path: '/purchase/check/third'})
      }
      if(role === '585322308'){
        this.$router.push({path: '/purchase/check/second'})
      }
      if(role === '1350049205' || role === '1'){
        this.$router.push({path: '/purchase/check/first'})
      }
    },
    showDialog() {
      this.dialogTableVisible = true;
    },
    viewFile(document) {
      if (document.url) {
        window.open(document.url);
        this.updateDocumentRead(document.id);
      } else {
        this.$message.warning("未上传发文！");
        this.toSearch();
      }
    },
    dateTimeFormat,
    toSearch() {
      getAction(this.url.selectDocumentSendOut)
        .then((resp) => {
          this.documents = resp.data.records;
        })
        .catch((e) => {
          this.$$message.console.error(e);
        })
        .finally(() => {
          this.loading = false;
        });
    },
    updateDocumentRead(id) {
      postActionByQueryString(this.url.updateDocumentRead, { id: id })
        .then((resp) => {
          this.toSearch();
        })
        .catch((item) => {
          console.log(item);
        });
    },
    async selectUserAuditPrivilege() {
      this.auditPrivilegeList = [];
      await getAction(this.url.selectUserAuditPrivilege).then((resp) => {
        let split = resp.data.auditPrivilege.split(",");
        split.forEach((item) => {
          this.auditPrivilegeList.push(item);
        });
      });
    },
    async selectAuditInfo(item, url) {
      this.auditInfo = {};
      await getAction(url).then((resp) => {
        this.auditInfo.auditPrivilege = item;
        this.auditInfo.number = resp.data.total;
        this.gridData.push(this.auditInfo);
        this.auditNumber = this.auditNumber + this.auditInfo.number;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 5px;
  background-color: rgb(240, 242, 245);
  .column {
    /* 超出部分隐藏*/
    overflow: hidden;
    padding: 5px;
  }
  .column-box {
    float: left;
    padding: 5px;
  }
  .c-card {
    float: left;
    background-color: #ffffff;
    margin: 10px;
    border-radius: 4%;
    padding: 10px;
    height: 300px;
    width: calc(100% - 20px);
  }
  .text-box {
    height: 12%;
    width: 100%;
    .text-h3 {
      position: relative;
      top: 3px;
      font-family: 黑体;
      margin-left: 10px;
    }
  }
  .body-box {
    height: 88%;
    width: 100%;
    .item-box {
      display: flex;
      justify-content: center;
      align-items: center;
      float: left;
      height: 50%;
      width: 50%;
      margin-top: 4px;
      padding: 2px;
      /*border: 1px solid #c2c0c0;*/
      .document-box {
        float: left;
        height: 100%;
        width: 90%;
        //padding: 5px;
        background-color: #ffffff;
        border-radius: 4px;
        transition: all 0.4s; /* 所有的属性变化在0.4s的时间段内完成 */
        .document-text {
          height: 10%;
          width: 100%;
          font-size: 25px;
          margin-left: 5px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .document-content-left {
          float: left;
          border-right: 1px solid #c2c0c0;
        }
        .document-content-right {
          float: left;
          height: 100%;
          width: 60%;
        }
      }
      .document-box:hover {
        cursor: pointer;
        transform: scale(1.08); /* 鼠标放到图片上的时候图片按比例放大  */
      }
    }
  }
  .quick-button-box {
    float: left;
    height: 50%;
    width: 33%;
    padding: 5px;
    .quick-button {
      background-color: rgb(240, 242, 245);
      height: 100px;
      width: 100%;
      float: left;
      border-radius: 10px;
      .quick-icon {
        width: 80%;
        height: 80%;
        margin-left: 8px;
      }
      .quick-p {
        font-size: 12%;
        margin-top: -7px;
        text-align: center;
      }
    }
    .quick-button:hover {
      cursor: pointer;
      background-color: #c9d4d5;
    }
  }
  .a-label {
    top: 0px;
    right: 0px;
  }
  .to-do-button-box {
    float: left;
    height: 50%;
    width: 50%;
    padding: 8px;
    .to-do-button {
      background-color: rgb(240, 242, 245);
      height: 100%;
      width: 100%;
      float: left;
      border-radius: 8px;
    }
    .to-do-button:hover {
      cursor: pointer;
      background-color: #c9d4d5;
    }
  }
  .p-1 {
    text-align: center;
    font-size: 14px;
    margin-top: 5px;
  }
  .p-2 {
    text-align: center;
    font-family: 黑体;
    font-size: 33px;
    color: #3a835d;
    margin-top: -15px;
  }
  .tag-box {
    height: 50%;
    width: 100%;
    padding: 4px;
  }
}
</style>
